<style scoped>
    .forumTop{
        display: flex;
        font-size: 22px;
        padding: 9px 0 9px 19px;
        color: #a19e9e;
        position: relative;
        border-bottom: 1px solid #bfa6a6;
    }
    .Listforum{
      background-color: white;
      width: 70%;
      margin-left: 15%;
      padding-bottom: 30px;
      border-radius: 28px;
      padding-top: 5px;
    }
    .forumTop div:nth-child(1){
        display: flex;
    }
    .forumTop div:nth-child(2){
        margin-left: 38px;
        margin-top: 7px;
    }
    .forumTop div:nth-child(2):hover{
        color: #ff8585;
    }
    .forumTop div:nth-child(3){
           margin-left: 27px;
           margin-top: 7px;
     }
    .forumTop div:nth-child(3):hover{
      color: #ff8585;
    }
    .forumTop div:nth-child(4){
      position: absolute;
      right: 30px;
      margin-top: 6px;
    }
     #stockSearch{
       border: 1px solid #dcdfe6;
       font-size: 30px;
       line-height: 38px;
       background-color: white;
       width: 39px;
       color: #717070ad;
       cursor: pointer;
     }
     #stockSearch:hover{
       background-color: #d8d8d8;
       color: #717070;
     }
    .userPicture{
        width: 44px;
        height: 44px;
        border-radius: 36px;
    }
    .listTop{
        display: flex;
        padding-left: 17px;
        padding-top: 10px;
        margin-bottom: 10px;
    }
    .username{
        margin-left: 10px;
        font-size: 18px;
        margin-top: 5px;
    }
    .forumCreateTime{
        margin-left: 10px;
        font-size: 13px;
        margin-top: 4px;
        color: #bda8a8;
    }
    h2{
        margin: 0 0 15px 18px;
      font-size: 17px;
    }
    .content{
        margin-left: 19px;
        width: 96%;
        font-size: 17px;
    }
    .contentPicture{
        display: flex;
      margin-top: 15px;
    }
    .contentPicture img{
      width: 233px;
      margin-left: 18px;
    }
    .caozuo{
        display: flex;
        margin-top: 13px;
        padding-bottom: 11px;
        border-bottom: 1px solid #b49e9e;
    }
    .caozuo i{
        font-size: 26px;
        margin-left: 15px;
    }
    .caozuo div{
        margin-left: 10px;
        line-height: 24px;
    }
    .forumTypeChange{
      color: #b20606;
      border-bottom: 1px solid #b20606;
    }
    .PageNumber{
      margin-top: 2%;
    }
    .PageNumberControl{
      display: flex;
      justify-content: center;
    }
    #likeThisPassage{
      cursor: pointer;
    }
</style>

<template>
<div style="background-color: #d6d1d157;">
    <div class="Listforum">
        <div class="forumTop">
            <div>
              <el-input v-model="stockSearch" placeholder="相关股票搜索" @keydown.enter="changeForumList(1)"/>
              <i class="iconfont icon-sousuokuang" id="stockSearch" @click="changeForumList(1)"></i>
            </div>
            <div style="cursor: pointer" :class="{'forumTypeChange':forumTypes===1}" @click="changeForumList(1)">最新</div>
            <div style="cursor: pointer" :class="{'forumTypeChange':forumTypes===2}" @click="changeForumList(2)">最热</div>
            <div><el-button @click="openPublish"  color="#626aef">发布帖子</el-button></div>
        </div>
        <div>
            <div v-for="(item ,index) in content">
                <div class="listTop">
                    <img class="userPicture" :src="item.avatar">
                    <div>
                        <div class="username">{{item.username}}</div>
                        <div class="forumCreateTime">{{item.createTime}}</div>
                    </div>
                </div>
                <h2 @click="ToforumContent(item.id)">{{item.title}}</h2>
                <div @click="ToforumContent(item.id)" class="content">{{item.content}}</div>
                <div @click="ToforumContent(item.id)" class="contentPicture">
                    <img v-for="picture in item.imageUrl" :src="picture">
                </div>
                <div class="caozuo">
                    <i class="iconfont icon-fenxiang" id=""></i>
                    <div></div>
                    <i @click="ToforumContent" class="iconfont icon-pinglunxiao" id=""></i>
                    <div>{{item.commentCount}}</div>
                   <i
                       :style="{ color: item.hasPraise === 'icon-dianzan' ? '#c15353' : undefined }"
                      :class="['iconfont', item.hasPraise]"
                        id="likeThisPassage"
                       @click="likeOrCancelThisPassage(item.id, index)"
                   ></i>
                    <div>{{item.praise}}</div>
                </div>
            </div>
        </div>
      <div class="PageNumber">
        <el-pagination
            background
            class="PageNumberControl"
            v-model:page-size="pageSize"
            v-model:current-page="currentPage"
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="ForumsNumber" />
      </div>
    </div>
</div>
<publish-forum @message-sent="handleMessage"/>
</template>

<script setup>
    import {useRouter} from "vue-router";
    import {computed, onMounted, ref, watch} from "vue";
    import PublishForum from "@/components/forumPage/publishForum/publishForum.vue";
    import {useCounterStore} from "@/stores/counter.js"
    import {getForumLikeUser, getForumList, likeForum} from "@/api/request.js";
    import {ElMessage} from "element-plus";

    const pageSize = ref(10)
    const Router=useRouter()
    const CounterStore=useCounterStore()

    onMounted(()=>{
        CounterStore.openPublishForum=false
    })
    function openPublish() {
        CounterStore.openPublishForum=true
    }

    let currentPage=ref(1)
    let ForumsNumber=ref(1)
    //控制分页
    function handleCurrentChange() {
      changeForumList(forumTypes.value)
    }

    let content=ref([])
    let stockSearch=ref('')
    //监听搜索框变化，重新获取帖子列表
    watch(stockSearch,()=>{
      if(stockSearch.value.length===0){
        changeForumList(1)
      }
    })

    //获取帖子列表
    async function getForumLists(column) {
      let userId
      if(sessionStorage.getItem('token')){
        userId=CounterStore.UserMessage.id
      }else {
        userId=-1
      }
      let response = (await getForumList(currentPage.value, 10, column,stockSearch.value))
      content.value=[]
      ForumsNumber.value=response.total
      let data=response.records
      for (let i = 0; i < data.length; i++) {
        if(data[i].imageUrl!==null){
            data[i].imageUrl= data[i].imageUrl.split("||").filter(url => url !== "");
        }
        let HasPraiseUserId=await getForumLikeUser(data[i].id)
        if(HasPraiseUserId.indexOf(userId)!== -1){
          data[i].hasPraise='icon-dianzan'
        }else {
          data[i].hasPraise='icon-iconfontzhizuobiaozhun023148'
        }
        content.value.push(data[i])
      }
    }
    getForumLists("create_time")


    let forumTypes=ref(1)
    //切换帖子列表类型
    async function changeForumList(index) {
      forumTypes.value = index
      if (index === 1) {
        await getForumLists("create_time")
      } else if (index === 2) {
        await getForumLists("praise")
      }
    }

    let ifUpdataList=ref(false)
    watch(ifUpdataList,()=>{
      if(ifUpdataList.value) {
        changeForumList(1)
        ifUpdataList.value=false
      }
    })
    //子组件传值给父组件
    function handleMessage(message) {
      ifUpdataList.value=message
    }

    //点赞帖子或取消点赞
    async function likeOrCancelThisPassage(postId,index) {
      if(!sessionStorage.getItem('token')){
        ElMessage.error('请先登录')
        return
      }
      await likeForum(postId)
      if(content.value[index].hasPraise==='icon-dianzan'){
        content.value[index].hasPraise='icon-iconfontzhizuobiaozhun023148'
        content.value[index].praise--
        ElMessage.success('取消点赞成功')
      }else {
        content.value[index].hasPraise='icon-dianzan'
        content.value[index].praise++
        ElMessage.success('点赞成功')
      }
    }


    //跳转到帖子详情页
    function ToforumContent(id) {
      Router.push({
        path:'/forumContent',
        query:{forumId:id}
      })
    }
</script>